<template>
  <div class="addGroupExhibits-box">
    <t-dialog
      :loading="loading"
      header="调整展品顺序"
      :visible="store.sortExbitionShow"
      :confirm-on-enter="true"
      :on-cancel="closetable"
      :on-close="closetable"
      :cancelBtn="null"
      :confirmBtn="null"
    >
      <template #body>

        <div v-if="list.length > 0 && store.sortExbitionShow" class="body-box">
            <p class="title">鼠标拖动进行排序</p>
          <draggable
            :list="list"  
            class="sort-box"  
            ghost-class="ghost"
            chosen-class="chosenClass"
            animation="300" 
            @start="onStart"
            @end="onEnd"
          >
            <template #item="{ element, index }">
              <div class="item" :class="{ 'sort-item-mg': (index + 1) % 5 === 0 }">
                <!-- {{ element.name }}{{index}} -->
                <div class="item-cover">
                  <div class="item-index">
                    {{ index+1 >= 10 ? index+1 : '0' + '' + (index+1) }}
                  </div>
                  <img :src="getLinkUrl(element.coverUrl)" alt="" />
                </div>
                <div class="item-name">
                  {{ element.name }}
                </div>
              </div>
            </template>
          </draggable>
        </div>
      </template>
      <template #footer>
        <t-button @click="closetable" theme="default" variant="outline">取消</t-button>
        <t-button @click="ok">确定</t-button>
      </template>
    </t-dialog>
  </div>
</template>
 
<script setup lang="ts">
import _ from 'lodash';
import { projectShowpieceSort, projectShowpieceSorts } from '@/api/exhibit/exhibit';
import { urls, getLinkUrl } from '@/utils/request/upload';
import draggable from 'vuedraggable';
import { MessagePlugin } from 'tdesign-vue-next';
import { getMOdeListArr } from '@/utils/getRemComputed';
import { ref, reactive, watch } from 'vue';
import { useProjectStore } from '@/store';

const list = ref([]);
const slotId = ref(0);
const addtableRef = ref();
const loading = ref(false);
const store = useProjectStore();
const selectModel = ref([]);

const init = () => {
  //获取当前分组所有展品
  slotId.value = store.contextmenuchildId;
  let MOdeList = _.cloneDeep(store.templateMOdeList);
  MOdeList.forEach((element) => {
    if (element.id == store.contextmenuchildId) {
      if (store.selectAuxiliaryIndex !== -1) {
        list.value =
          element.auxiliaryList[store.selectAuxiliaryIndex].showpieceList[store.contextmenuGroupId].showpieceList;
        slotId.value = element.auxiliaryList[store.selectAuxiliaryIndex].id;
      } else {
        list.value = element.showpieceList[store.contextmenuGroupId].showpieceList;
      }
    }
    element.children.forEach((el) => {
      if (el.id == store.contextmenuchildId) {
        if (store.selectAuxiliaryIndex !== -1) {
          list.value =
            el.auxiliaryList[store.selectAuxiliaryIndex].showpieceList[store.contextmenuGroupId].showpieceList;
          slotId.value = el.auxiliaryList[store.selectAuxiliaryIndex].id;
        } else {
          list.value = el.showpieceList[store.contextmenuGroupId].showpieceList;
        }
      }
      el.children.forEach((arr) => {
        if (arr.id == store.contextmenuchildId) {
          if (store.selectAuxiliaryIndex !== -1) {
            list.value =
              arr.auxiliaryList[store.selectAuxiliaryIndex].showpieceList[store.contextmenuGroupId].showpieceList;
            slotId.value = arr.auxiliaryList[store.selectAuxiliaryIndex].id;
          } else {
            list.value = arr.showpieceList[store.contextmenuGroupId].showpieceList;
          }
        }
      });
    });
  });
};
const closetable = (context?: any): void => {
  store.sortExbitionShow = false;
};
const onStart = (evt: any) => {};
const onEnd = (evt: any) => {
//   console.log('卡片拖拽结束', evt);
};
const ok = async () => {
  try {
    if (loading.value) {
      return;
    }
    store.templateMOdeList.forEach((element, elementIndex) => {
      if (element.id == store.contextmenuchildId) {
        if (store.selectAuxiliaryIndex !== -1) {
          element.auxiliaryList[store.selectAuxiliaryIndex].showpieceList[store.contextmenuGroupId].showpieceList =
            list.value;
        } else {
          element.showpieceList[store.contextmenuGroupId].showpieceList = list.value;
        }
      }
      element.children.forEach((el) => {
        if (el.id == store.contextmenuchildId) {
          if (store.selectAuxiliaryIndex !== -1) {
            el.auxiliaryList[store.selectAuxiliaryIndex].showpieceList[store.contextmenuGroupId].showpieceList =
              list.value;
          } else {
            el.showpieceList[store.contextmenuGroupId].showpieceList = list.value;
          }
        }
        el.children.forEach((arr) => {
          if (arr.id == store.contextmenuchildId) {
            if (store.selectAuxiliaryIndex !== -1) {
              arr.auxiliaryList[store.selectAuxiliaryIndex].showpieceList[store.contextmenuGroupId].showpieceList =
                list.value;
            } else {
              arr.showpieceList[store.contextmenuGroupId].showpieceList = list.value;
            }
          }
        });
      });
    }); 
    store.SaveFreeInfoData()
    
    loading.value = false;
    store.sortExbitionShow=false;
    MessagePlugin.success('排序成功')
  } catch (err) {
    loading.value = false;
  }
  // store.setaddGroupExhibitsShow(false)
};
watch(
  () => store.sortExbitionShow,
  () => {
    if (store.sortExbitionShow) {
      init();
      console.log(list.value);
    }
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
.addGroupExhibits-box { 
  :deep(.t-dialog) {
    width: 1058px;
    // height: 77.78vh; 
  }
  :deep(.t-dialog__footer) {
    padding: 24px;
  }
  :deep(.t-dialog__header) { 
    box-shadow: none;
  }
  :deep(.t-dialog__body) {
    padding: 0px 24px;
    width: 1058px;
    min-height: 60vh;
  }
}
:deep(.t-button) {
  margin-left: 12px !important;
}
.sort-box {
  display: flex; 
  flex-wrap: wrap;
  width: calc(1058px - 48px);
  max-height: 60vh;
  overflow: auto;
  scrollbar-width: none;
}
.item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 184px;
  height: 184px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #f0f0f0;
  margin-right: 16px;
  margin-bottom: 16px;
}
.sort-item-mg {
  margin-right: 0;
}
.item-cover { 
  position: relative; 
  width: 182px; 
  height: 143px; 
  background: #f5f5f5;
  border-radius: 3px 3px 0px 0px;
  img {
    width: 182px;
    height: 143px;
    background: #f5f5f5;
    border-radius: 3px 3px 0px 0px;
    object-fit: contain;
  }
}
.item-index {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 22px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px 0px 8px 0px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 22px;
}
.item-name {
  flex: 1;
  padding: 8px 12px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body-box{
    display: flex;
    flex-direction: column;
    min-height: 60vh;
}
.title{
margin-bottom: 16px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: rgba(0,0,0,0.38);
line-height: 24px;
text-align: left;
}
</style>